button {
  border: none;
  background-color: #fff;
  padding: .5rem;
  border-radius: .3rem;
}
.cart-container {
  background-color: #e5e5e5;
  height: 100%;
  margin-bottom: 129px;
  h3 {
    background-color: #fff;
    text-align: center;
    margin: 0;
    padding: 1rem;
    margin-bottom: .5rem;
  }
  .product-item {
    display: grid;
    grid-template-areas:
    'img title title price'
    'img . . price'
    'select . payMoney payMoney'
    '. . cancel pay';
    grid-template-columns: 100px 1fr 1fr max-content;
    grid-template-rows: max-content 1fr .5fr max-content;
    place-content: center;
    padding: .5rem;
    margin: .5rem 0;
    background-color: #fff;
    .img {
      grid-area: img;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      grid-area: title;
      padding-left: .5rem;
    }
    .price {
      grid-area: price;
      justify-self: flex-end;
      .unit-price {
        color: red;
      }
      .amount {
        margin-top: .3rem;
        color: #555555;
        div {
          width: 100%;
          text-align: right;
        }
      }
    }
    .select {
      grid-area: select;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1px solid #e5e5e5e5;
      align-self: center;
      background-color: #fff;
    }
    .pay {
      position: relative;
      margin:  .5rem 0;
      grid-area: payMoney;
      line-height: 4rem;
      justify-self: flex-end;
      &::after,
      &::before {
        content: '';
        height: 1px;
        width: 100vw;
        background-color: #e5e5e5;
        position: absolute;
        right: 0;
      }
      &::before {
        top: 0;
      }
      &::after {
        bottom: 0;
      }
    }
    .cancel-button {
      grid-area: cancel;
      justify-self: center;
      button {
        background-color: #fff;
        border: 1px solid #e5e5e5;
      }
    }
    .pay-button {
      grid-area: pay;
      justify-self: end;
      button {
        background-color: red;
        color: #fff;
        border: 1px solid red;
      }

    }
  }
  .pay-all {
    position: fixed;
    bottom: 64px;
    left: 0;
    height: 64px;
    width: 100%;
    display: flex;
    align-items: center;
    border-top: 1px solid #e5e5e5;
    background-color: #fff;
    .select-product {
      flex: 0.3;
      display: flex;
      align-items: center;
      .select-all {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        background-color: #fff;
        margin-left: .5rem;
      }
    }
    .count-price {
      flex: 0.4;
      text-align: right;
      span {
        margin-right: .5rem;
      }
    }
    .buy {
      flex: 0.4;
      background-color: red;
      color: #fff;
      border: 1px solid red;
      height: 100%;
      width: 50%;
      line-height: 64px;
      text-align: center;
    }
  }
}

